<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- CSS模块文件按依赖顺序引入 -->
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="stylesheet" href="./styles/components.css">
    <link rel="stylesheet" href="./styles/utilities.css">
    <link rel="stylesheet" href="./styles/notifications.css">
    <link rel="stylesheet" href="./styles/darkTheme.css">
</head>
<body>
    <div id="app" :class="{ 'dark-theme': isDarkTheme }">
        <header class="main-header">
            <div class="header-content">
                <h1>博客管理系统</h1>
                <button class="theme-toggle" @click="toggleTheme">
                    {{ isDarkTheme ? '🌞' : '🌙' }}
                </button>
            </div>
            <div v-if="loading" class="loading-indicator">加载中，请稍候...</div>
        </header>

        <search-component 
          v-model="globalSearchTerm"
          @search="onSearch"
          @clear="onSearchClear"
        ></search-component>

        <div class="tabs">
            <div class="tab" :class="{ active: activeTab === 'dashboard' }" @click="switchTab('dashboard')">控制台</div>
            <div class="tab" :class="{ active: activeTab === 'users' }" @click="switchTab('users')">用户管理</div>
            <div class="tab" :class="{ active: activeTab === 'categories' }" @click="switchTab('categories')">分类管理</div>
            <div class="tab" :class="{ active: activeTab === 'blog' }" @click="switchTab('blog')">博客管理</div>
            <div class="tab" :class="{ active: activeTab === 'api' }" @click="switchTab('api')">API 文档</div>
            <div class="tab" :class="{ active: activeTab === 'about' }" @click="switchTab('about')">关于项目</div>
        </div>

        <div v-if="error" class="error notification notification-error">{{ error }}</div>
        <div v-if="message" class="success notification notification-success">{{ message }}</div>

        <!-- 搜索结果弹出框 -->
        <div v-if="searchResults.length > 0" class="search-results-popup">
            <div class="search-results-header">
                <h3>搜索结果 ({{ searchResults.length }})</h3>
                <button class="close-button" @click="clearGlobalSearch">×</button>
            </div>
            <div class="search-results-list">
                <div v-for="result in searchResults" :key="result.id" class="search-result-item" :class="result.type">
                    <div class="result-title">{{ result.title }}</div>
                    <div class="result-subtitle">{{ result.subtitle }}</div>
                    <button class="btn btn-sm" @click="result.action()">查看详情</button>
                </div>
                <div v-if="searchResults.length === 0" class="no-results">没有找到匹配的结果</div>
            </div>
        </div>

        <!-- 控制台标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'dashboard' }">
            <dashboard-component v-if="activeTab === 'dashboard' && appModule" :app-module="appModule"></dashboard-component>
            <div v-else class="container">
                <h2>控制台组件加载失败</h2>
                <p>{{ error || '组件未正确加载' }}</p>
            </div>
        </div>

        <!-- 用户管理标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'users' }">
            <user-management-component v-if="activeTab === 'users' && appModule" :app-module="appModule"></user-management-component>
            <div v-else class="container">
                <h2>用户管理组件加载失败</h2>
                <p>{{ error || '组件未正确加载' }}</p>
            </div>
        </div>

        <!-- 分类管理标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'categories' }">
            <category-management-component v-if="activeTab === 'categories' && appModule" :app-module="appModule"></category-management-component>
            <div v-else class="container">
                <h2>分类管理组件加载失败</h2>
                <p>{{ error || '组件未正确加载' }}</p>
            </div>
        </div>

        <!-- 博客管理标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'blog' }">
            <post-management-component v-if="activeTab === 'blog' && appModule" :app-module="appModule"></post-management-component>
            <div v-else-if="activeTab === 'blog' && !appModule" class="container">
                <h2>正在加载博客管理组件...</h2>
                <p>请稍候，应用模块正在初始化</p>
                <div class="loading-spinner"></div>
            </div>
            <div v-else class="container">
                <h2>博客管理组件加载失败</h2>
                <p>{{ error || '组件未正确加载' }}</p>
            </div>
        </div>

        <!-- 文章详情模态框 -->
        <post-detail-component
            v-if="appModule && appModule.postModule && appModule.postModule.selectedPost"
            :app-module="appModule"
            class="post-detail-overlay"
        ></post-detail-component>

        <!-- API 文档标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'api' }">
            <div v-if="activeTab === 'api'" id="api-docs-container">
                <div v-html="apiContent"></div>
            </div>
        </div>

        <!-- 关于项目标签页 -->
        <div class="tab-content" :class="{ active: activeTab === 'about' }">
            <div v-if="activeTab === 'about'" id="about-container">
                <div v-html="aboutContent"></div>
            </div>
        </div>
    </div>

    <!-- 加载模块和组件 -->
    <script type="module" src="./modules/utils.js"></script>
    <script type="module" src="./modules/userModule.js"></script>
    <script type="module" src="./modules/postModule.js"></script>
    <script type="module" src="./modules/categoryModule.js"></script>
    <script type="module" src="./modules/commentModule.js"></script>

    <!-- 加载应用初始化脚本 -->
    <script type="module" src="./js/app-init.js"></script>

</body>
</html>